<template name="mytime3">
	<view class="daojishi">
		<view class="end"><text style="color: #000;font-size: 24rpx;font-weight: 700;">还剩</text></view>
		<view class="time">
			<text>{{day}}</text>
		</view>
		<view class="maohao"><text>天</text></view>
		<view class="time">
			<text>{{hour}}</text>
		</view>
		<view class="maohao"><text>:</text></view>
		<view class="time">
			<text>{{min}}</text>
		</view>
		<view class="maohao"><text>:</text></view>
		<view class="time">
			<text>{{sec}}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'mytime3', //组件名称
	// 传递参数
	props: {
		item: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			day: '',
			hour: '',
			min: '',
			sec: ''
		};
	},
	methods: {
		daojishi() {
			//倒计时
			let _end = new Date(Date.parse(this.item.endTime.replace(/-/g, '/'))); //活动结束时间
			var _now = new Date(); //当前时间
			var _leftTime = _end.getTime() - _now.getTime();
			if (_leftTime > 0) {
				let _day = Math.floor(_leftTime / (1000 * 60 * 60 * 24));
				let _hour = Math.floor((_leftTime / (1000 * 60 * 60)) % 24);
				let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
				let _sec = Math.floor((_leftTime / 1000) % 60);
				this.day = _day > 9 ? _day : '0' + _day;
				
				this.hour = _hour > 9 ? _hour : '0' + _hour;
				
				this.min = _min > 9 ? _min : '0' + _min;
				
				this.sec = _sec > 9 ? _sec : '0' + _sec;
				
			} else {
				this.day = '00';
				this.hour = '00';
				this.min = '00';
				this.sec = '00';
			}
		}
	},
	created() {
		setInterval(() => {
			this.daojishi();
		}, 1000);
	}
};
</script>

<style lang="less">
.daojishi {
	display: flex;
	font-size: 24rpx;
	.time {
		width: 50rpx;
		height: 50rpx;
		background-color: red;
		text-align: center;
		border-radius: 5rpx;
		text {
			line-height: 50rpx;
			color: #fff;
		}
	}
	.maohao {
		width: 25rpx;
		height: 50rpx;
		text-align: center;
		text {
			color: red;
			line-height: 50rpx;
		}
	}
	.end {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		margin-right: 10rpx;
		text {
			line-height: 50rpx;
		}
	}
}
</style>
